<template>
  <t-dialog :header="header" @confirm="onSubmit" :confirmBtn="{
        content: loading?'提交中...':'确认',
        theme: 'primary',
        loading: loading,
      }" :visible.sync="visible" :onClose="closeDialog"     :closeOnOverlayClick="false"
            width="90%" top="5%">
    <div style="height: 65vh">
      <div style="display: flex;font-weight: bold;justify-content: center;font-size: 30px;padding: 30px">
        待形式审查项目列表
      </div>
      <t-table maxHeight="400"  row-key="project.id" :columns="columns" :data="data"
               :selected-row-keys="selectedRowKeys"
               :loading="dataLoading"
               @select-change="(val)=>{selectedRowKeys=val}">
        <template #[`project.subjectClassification`]="{row}">
          {{ row.project.subjectClassification | filterByDict(dict.type.subject_classification) }}
        </template>
        <template #[`project.projectType`]="{row}">
          {{ row.project.projectType | filterByDict(dict.type.project_type) }}
        </template>
        <template #op="{row}">
          <t-button @click="dialog.header=row.project.projectName;dialog.objId=row.project.id;dialog.editOpen=false;dialog.open_detail=true"
                    size="small" variant="text" class="t-button-link">
            <t-icon name="info-circle" slot="icon"/>
            详情
          </t-button>
        </template>
      </t-table>
      <div style="display: flex;font-weight: bold;justify-content: center;gap:10px;margin-top:30px">
        <t-button :disabled="this.selectedRowKeys.length<=0" @click="joinList" size="large" theme="default" variant="outline"> <t-icon name="arrow-down" slot="icon"></t-icon>分配</t-button>
        <t-button :disabled="this.selectedRowKeys2.length<=0" @click="removeList" size="large" theme="default" variant="outline"> <t-icon name="arrow-up" slot="icon"></t-icon>移出</t-button>
      </div>
      <div style="display: flex;font-weight: bold;justify-content: center;font-size: 30px;padding: 30px">
        已分配项目列表
      </div>
      <t-table maxHeight="400" row-key="project.id" :columns="columns2" :data="data2" :selected-row-keys="selectedRowKeys2"
               :loading="dataLoading2"
               @select-change="(val)=>{selectedRowKeys2=val}">
        <template #[`project.subjectClassification`]="{row}">
          {{ row.project.subjectClassification | filterByDict(dict.type.subject_classification) }}
        </template>
        <template #[`project.projectType`]="{row}">
          {{ row.project.projectType | filterByDict(dict.type.project_type) }}
        </template>
        <template #op="{row}">
          <t-button v-if="row.project.version === '2024'" @click="dialog.header=row.project.projectName;dialog.objId=row.project.id;dialog.editOpen=false;dialog.open_detail=true"
                    size="small" variant="text" class="t-button-link">
            <t-icon name="info-circle" slot="icon"/>
            详情
          </t-button>
          <t-button v-else @click="dialog.header=row.project.projectName;dialog.objId=row.project.id;dialog.editOpen=false;dialog.open_detail=true"
                    size="small" variant="text" class="t-button-link">
            <t-icon name="info-circle" slot="icon"/>
            详情
          </t-button>
        </template>
      </t-table>
    </div>
    <project-detail-dialog  :header="dialog.header" :objId="dialog.objId" :visible.sync="dialog.open_detail"
                           v-if="dialog.open_detail"></project-detail-dialog>
    <item-detail-dialog  :header="dialog.header" :objId="dialog.objId" :visible.sync="dialog.open_item_detail"
                            v-if="dialog.open_item_detail"></item-detail-dialog>
  </t-dialog>
</template>

<script>
import ProjectDetailDialog from "../../pm/components/project-detail-dialog.vue";
import ItemDetailDialog from "../../pm/components/item-detail-dialog.vue";

export default {
  name: "select-project",
  dicts: ["subject_classification", "project_type"],
  components: {
    ProjectDetailDialog,
    ItemDetailDialog
  },
  props: {
    header: {
      type: String,
      default: ''
    },
    row: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      data2: [],
      dataLoading2: false,
      selectedRowKeys2: [],
      dialog: {
        header: "",
        objId: 0,
        open_detail: false,
        editOpen: true,
        open_item_detail: false,
      },
      selectedRowKeys: [],
      queryParams: {
        reviewType: '',
        pageNum: 1,
        pageSize: 10,
        dateRange: []
      },
      data: [],
      dataLoading: false,
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 10,
        total: 0,
        showPageSize: false,
        showFirstAndLastPageBtn: false,
      },
      columns: [
        {
          colKey: 'row-select',
          type: 'multiple',
          width: 64,
        },
        {
          colKey: "project.projectName",
          title: "项目名称",
          align: "center",
          width: 220
        },
        {
          colKey: "project.declareDate",
          title: "申报日期",
          align: "center",
          width: 110,
        },
        {
          colKey: "project.adviceFunding",
          title: "建议经费总概算",
          align: "center",
          width: 160,
        },
        {
          colKey: "project.subsidyFunding",
          title: import.meta.env.VITE_SITE_TAG==='jtt'?"厅拨经费":`集团补助经费`,
          align: "center",
          width: 100,
        },
        {
          colKey: "project.projectLeaderName",
          title: "负责人",
          align: "center",
          width: 100
        },
        {
          colKey: "project.declareDeptName",
          title: "承担单位",
          align: "center",
          width: 180,
          // sorter: true
        },
        {
          colKey: "project.projectCategoryName",
          title: "计划类别",
          align: "center",
          width: 120
        },
        {
          colKey: "project.subjectClassification",
          title: "学科分类",
          align: "center",
          width: 100
        },
        {
          colKey: "project.projectType",
          title: "项目类型",
          align: "center",
          width: 120
        },
        {
          colKey: "project.startDate",
          title: "开始时间",
          align: "center",
          width: 120,
          // sorter: true,
        },
        {
          colKey: "project.endDate",
          title: "结束时间",
          align: "center",
          width: 120,
          // sorter: true,
        },

        {
          colKey: "op",
          title: "操作",
          align: "center",
          width: 120
        },
      ],
      columns2: [
        {
          colKey: 'row-select',
          type: 'multiple',
          width: 64,
        },
        {
          colKey: "project.projectName",
          title: "项目名称",
          align: "center",
          width: 220
        },
        {
          colKey: "project.projectLeaderName",
          title: "负责人",
          align: "center",
          width: 100
        },
        {
          colKey: "project.declareDeptName",
          title: "承担单位",
          align: "center",
          width: 180
        },
        {
          colKey: "project.projectCategoryName",
          title: "计划类别",
          align: "center",
          width: 120
        },
        {
          colKey: "project.subjectClassification",
          title: "学科分类",
          align: "center",
          width: 100
        },
        {
          colKey: "project.projectType",
          title: "项目类型",
          align: "center",
          width: 120
        },

        {
          colKey: "project.createTime",
          title: "申报时间",
          align: "center",
          width: 200
        },
        {
          colKey: "op",
          title: "操作",
          align: "center",
          width: 120
        },
      ],
      visible: true,
      loading: false,
    }
  },
  watch: {
    row: {
      immediate: true,
      handler(val) {
        if (val.id) {
          this.getList();
          this.getBindList();
        }
      }
    }
  },
  methods: {
    joinList(){
      // 上面下面id 一起提交
      // 上面数据移除 id
      // const ids = this.data2.map(val=> val.project.id)
      // const projectIds = this.selectedRowKeys.concat(ids)
      // this.addReviewProject(projectIds);
      // this.selectedRowKeys = []


      // 找出对应数据 加入到 下面的队列
      const newData = []
      this.data.forEach((val,index) => {
        if(this.selectedRowKeys.includes(val.project.id)){
          newData.push({...val,rowIndex:index})
        }
      })
      this.data = this.data.filter(val=>{
        if(this.selectedRowKeys.includes(val.project.id)){
          return false
        }
        return true
      })
      this.data2.push(...newData)
      this.selectedRowKeys = []
    },
    removeList(){
      // const data = this.data2.filter(val => {
      //   if(!this.selectedRowKeys2.includes(val.project.id)){
      //     return true
      //   }
      //   return false
      // })
      // const ids = data.map(val=> val.project.id)
      // // 如果在选中的则移除
      // this.addReviewProject(ids);
      // this.selectedRowKeys2 = []

      const newData = []
      this.data2.forEach((val,index) => {
        if(this.selectedRowKeys2.includes(val.project.id)){
          newData.push(val)
        }
      })
      this.data2 = this.data2.filter(val=>{
        if(this.selectedRowKeys2.includes(val.project.id)){
          return false
        }
        return true
      })
      this.data.push(...newData)
      this.selectedRowKeys2 = []
    },
    addReviewProject(projectIds){
      this.$api.kjxm.approve.addReviewProject({
        approverId: this.row.id,
        userName: this.row.nickName,
        projectIds
      }).then((res) => {
        // 初始化
        // this.$message.success("操作成功");
        this.getList();
        this.getBindList();
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    getBindList() {
      this.dataLoading2 = true;
      this.$api.kjxm.approve.ApproveUserProjectGetByUserId(this.row.id).then((res) => {
        this.data2 = res.data;
        this.dataLoading2 = false;
        // this.selectedRowKeys = this.data2.map(val => val.project.id)
        // this.selectedRowKeys2 =  this.data2.map(val => val.project.id);
        // this.getList();
      }).catch((e) => {
        this.dataLoading2 = false
        this.$message.error(e.toString());
      });
    },
    getList() {
      this.dataLoading = true;
      this.queryParams.pageNum = this.pagination.current || 1;
      // this.queryParams.reviewType = this.formData.reviewType;
      // this.queryParams.teamId = this.formData.id;
      // this.queryParams.projectStatus = 2;
      this.$api.kjxm.approve.getApproverReviewList(this.queryParams).then((res) => {
        this.data = res.data;
        // this.pagination.total = res.total;
        this.dataLoading = false;
      }).catch((e) => {
        this.dataLoading = false
        this.$message.error(e.toString());
      });
    },
    onSubmit() {
      // if (this.selectedRowKeys.length === 0) {
      //   this.$message.error('请选择项目')
      //   return false
      // }
      this.loading = true;
      const ids = this.data2.map(val=> val.project.id)
      this.$api.kjxm.approve.addReviewProject({
        approverId: this.row.id,
        userName: this.row.nickName,
        projectIds: ids
      }).then((res) => {
        // 初始化
        this.$message.success("分配成功");
        // this.getBindList();
        // this.getList();
        this.$emit("reload");
        this.$emit("update:visible", false);
        this.loading = false;
      }).catch((e) => {
        this.loading = false;
        this.$message.error(e.toString());
      });
    },
    closeDialog() {
      this.$emit("update:visible", false);
    },

  }
}
</script>

<style scoped>
.overlay-options {
  display: inline-block;
  font-size: 20px;
}
</style>
